/** IT空调部件 
 * Author:      yangjq 
 * CreateTime:  2023/9/7 16:24:15 
 * LastEditor:  yangjq 
 * ModifyTime:  2023/12/5 20:32:16 
 * Description: 
*/ 
<template>
  <div
    style="height: 100%; width: 100%;padding-left:10px;padding-right:10px; display: flex; flex-direction: row; justify-content: center; align-items: center">
    <div class="part-air-header" style="width: 15%;display: flex;align-items: center;justify-content:center;">
      <span v-html="curAirRoomName"></span>
    </div>
    <div style="width: 25%;display: flex;align-items: center;justify-content:center;">
      <img src="/images/screen-it/空调-128.png" style="height: 100px; width: 100px;"/>
      <!-- <svg t="1694525507303" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16798" width="64" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M919.703704 5.688889h-815.407408C47.407407 5.688889 0 53.096296 0 109.985185v297.718519c0 56.888889 47.407407 104.296296 104.296296 104.296296h815.407408c56.888889 0 104.296296-47.407407 104.296296-104.296296V109.985185c0-56.888889-47.407407-104.296296-104.296296-104.296296zM967.111111 407.703704c0 26.548148-20.859259 47.407407-47.407407 47.407407h-815.407408C77.748148 455.111111 56.888889 434.251852 56.888889 407.703704V109.985185c0-26.548148 20.859259-47.407407 47.407407-47.407407h815.407408c26.548148 0 47.407407 20.859259 47.407407 47.407407v297.718519z" p-id="16799" fill="#15B3F7"></path><path d="M849.540741 231.348148H174.459259c-15.17037 0-28.444444 13.274074-28.444444 28.444445s13.274074 28.444444 28.444444 28.444444h675.081482c15.17037 0 28.444444-13.274074 28.444444-28.444444s-13.274074-28.444444-28.444444-28.444445zM849.540741 339.437037H174.459259c-15.17037 0-28.444444 13.274074-28.444444 28.444444s13.274074 28.444444 28.444444 28.444445h675.081482c15.17037 0 28.444444-13.274074 28.444444-28.444445s-13.274074-28.444444-28.444444-28.444444zM208.592593 597.333333c-9.481481-17.066667-24.651852-32.237037-41.718519-45.511111-13.274074-9.481481-30.340741-7.585185-39.822222 5.688889-9.481481 11.377778-5.688889 28.444444 5.688889 37.925926 11.377778 7.585185 18.962963 17.066667 26.548148 28.444444 5.688889 11.377778 9.481481 22.755556 11.377778 36.02963 0 13.274074-1.896296 24.651852-5.688889 36.02963-5.688889 11.377778-11.377778 22.755556-22.755556 32.237037l-3.792592 3.792592c-15.17037 15.17037-26.548148 32.237037-34.133334 51.2-7.585185 18.962963-11.377778 39.822222-9.481481 62.577778 1.896296 20.859259 7.585185 41.718519 18.962963 60.681482 9.481481 17.066667 24.651852 32.237037 41.718518 45.511111 5.688889 3.792593 11.377778 5.688889 17.066667 5.688889 9.481481 0 17.066667-3.792593 22.755556-11.377778 9.481481-13.274074 7.585185-30.340741-5.688889-39.822222-11.377778-7.585185-18.962963-17.066667-26.548149-28.444445-5.688889-11.377778-9.481481-22.755556-11.377777-36.029629s1.896296-24.651852 5.688889-36.02963c5.688889-11.377778 11.377778-22.755556 22.755555-32.237037l3.792593-3.792593c15.17037-15.17037 26.548148-32.237037 34.133333-51.2 7.585185-20.859259 11.377778-41.718519 9.481482-62.577777s-7.585185-41.718519-18.962963-58.785186zM538.548148 593.540741c-9.481481-17.066667-24.651852-32.237037-41.718518-45.511111-13.274074-9.481481-30.340741-7.585185-39.822223 5.688889s-7.585185 30.340741 5.688889 39.822222c11.377778 7.585185 18.962963 17.066667 26.548148 28.444444 5.688889 11.377778 9.481481 22.755556 11.377778 36.02963 0 13.274074-1.896296 24.651852-5.688889 36.029629-5.688889 11.377778-11.377778 22.755556-22.755555 32.237037l-3.792593 3.792593c-15.17037 15.17037-26.548148 32.237037-34.133333 51.2-7.585185 18.962963-11.377778 39.822222-9.481482 62.577778 1.896296 20.859259 7.585185 41.718519 18.962963 60.681481 9.481481 17.066667 24.651852 32.237037 41.718519 45.511111 5.688889 3.792593 11.377778 5.688889 17.066667 5.688889 9.481481 0 17.066667-3.792593 22.755555-11.377777 9.481481-13.274074 7.585185-30.340741-5.688889-39.822223-11.377778-7.585185-18.962963-17.066667-26.548148-28.444444-5.688889-11.377778-9.481481-22.755556-11.377778-36.02963s1.896296-24.651852 5.688889-36.029629c5.688889-11.377778 11.377778-22.755556 22.755556-32.237037l3.792592-3.792593c15.17037-15.17037 26.548148-32.237037 34.133334-51.2 7.585185-20.859259 11.377778-41.718519 9.481481-62.577778-1.896296-22.755556-7.585185-41.718519-18.962963-60.681481zM373.57037 656.118519c-9.481481-17.066667-24.651852-32.237037-41.718518-45.511112-13.274074-9.481481-30.340741-7.585185-39.822222 5.688889s-7.585185 30.340741 5.688889 39.822223c11.377778 7.585185 18.962963 17.066667 26.548148 28.444444 5.688889 11.377778 9.481481 22.755556 11.377777 36.02963 0 13.274074-1.896296 24.651852-5.688888 36.029629-5.688889 11.377778-11.377778 22.755556-22.755556 32.237037l-3.792593 3.792593c-15.17037 15.17037-26.548148 32.237037-34.133333 51.2-7.585185 20.859259-11.377778 41.718519-9.481481 62.577778 1.896296 20.859259 7.585185 41.718519 18.962963 60.681481 9.481481 17.066667 24.651852 32.237037 41.718518 45.511111 5.688889 3.792593 11.377778 5.688889 17.066667 5.688889 9.481481 0 17.066667-3.792593 22.755555-11.377778 9.481481-13.274074 7.585185-30.340741-5.688889-39.822222-11.377778-7.585185-18.962963-17.066667-26.548148-28.444444-5.688889-11.377778-9.481481-22.755556-11.377778-36.02963 0-13.274074 1.896296-24.651852 5.688889-36.02963 5.688889-11.377778 11.377778-22.755556 22.755556-32.237037l3.792593-3.792592c15.17037-15.17037 26.548148-32.237037 34.133333-51.2 7.585185-20.859259 11.377778-39.822222 9.481481-62.577778-1.896296-22.755556-9.481481-41.718519-18.962963-60.681481zM923.496296 635.259259c-7.585185-13.274074-24.651852-18.962963-37.925926-9.481481l-60.681481 36.029629V587.851852c0-15.17037-13.274074-28.444444-28.444445-28.444445s-28.444444 13.274074-28.444444 28.444445v70.162963l-60.681481-36.02963c-13.274074-7.585185-30.340741-3.792593-37.925926 9.481482-7.585185 13.274074-3.792593 30.340741 9.481481 37.925926l60.681482 36.029629-60.681482 36.02963c-13.274074 7.585185-18.962963 24.651852-9.481481 37.925926 5.688889 9.481481 15.17037 15.17037 24.651851 15.17037 5.688889 0 9.481481-1.896296 13.274075-3.792592l60.681481-36.02963v70.162963c0 15.17037 13.274074 28.444444 28.444444 28.444444s28.444444-13.274074 28.444445-28.444444V758.518519l60.681481 36.029629c3.792593 1.896296 9.481481 3.792593 13.274074 3.792593 9.481481 0 18.962963-5.688889 24.651852-15.170371 7.585185-13.274074 3.792593-30.340741-9.481481-37.925926L853.333333 709.214815l60.681482-36.02963c13.274074-7.585185 17.066667-24.651852 9.481481-37.925926z" p-id="16800" fill="#15B3F7"></path></svg> -->
    </div>

    <div style="width: 60%;">
      <div v-if="airList.length<=4" class="air-room-list">
        <div class="part-air-cls" name="part-air-cls" v-for="item in airList">
          <el-tooltip effect="dark"
                      :content="item.name"
                      placement="top">
            <div class="air-font">{{ item.name }}</div>
          </el-tooltip>
          <span v-if="item.status ==='开启'" class="part-status-cls status-open">{{ item.status }}</span>
          <span v-else class="part-status-cls status-close">{{ item.status }}</span>
          <img src="/images/screen-it/风扇-B.png" :class="{ snowflake : item.status ==='开启','icon':true}"/>
        </div>
      </div>
      <el-scrollbar v-else :height="scrollerHeight+'px'" style="width:100%;" ref="scrollArea" @mouseenter="stopScroll" @mouseleave="startScroll">
        <div class="air-room-list" :height="aireRoomContainerHeight+'px'" >
          <div class="part-air-cls" name="part-air-cls" v-for="item in airList">
            <el-tooltip effect="dark"
                        :content="item.name"
                        placement="top">
              <div class="air-font">{{ item.name }}</div>
            </el-tooltip>
            <span v-if="item.status ==='开启'" class="part-status-cls status-open">{{ item.status }}</span>
            <span v-else class="part-status-cls status-close">{{ item.status }}</span>
            <img src="/images/screen-it/风扇-B.png" :class="{ snowflake : item.status ==='开启','icon':true}"/>
          </div>
        </div>
      </el-scrollbar>
    </div>

  </div>
</template>
<script setup lang="ts">
import {ref, Ref, reactive, watchEffect, onMounted, computed, onUnmounted,nextTick} from 'vue';
import {defHttp} from "/@/utils/http/axios";

const curAirRoomName = ref('数据<br/>机房');
const refAirRoom = ref(null);
let realRoomIndex = 0;
const props = defineProps({
  roomIndex: {type: Number, default: 0}
});
const ROOM_NAMES = ['数据<br/>机房', '网络<br/>机房', 'UPS<br/>间'];
onMounted(() => {
  realRoomIndex = props.roomIndex;
  if (props.roomIndex > 2) {
    realRoomIndex = 0;
  }
  curAirRoomName.value = ROOM_NAMES[realRoomIndex];
});

const airList = ref([
  {name: "机组1", status: "开启"},
  {name: "机组2", status: "开启"},
  {name: "机组3", status: "开启"},
  {name: "机组4", status: "关闭"},
])

function loadAirData() {
  realRoomIndex = props.roomIndex;
  if (props.roomIndex > 2) {
    realRoomIndex = 0;
  }
  curAirRoomName.value = ROOM_NAMES[realRoomIndex];
  let api = "/screen/it/airInfo";
  let params = {
    name: curAirRoomName.value.replaceAll("<br/>", "")
  };
  let options = {isTransformResponse: false};
  defHttp.get({url: api, params}, options)
    .then((res) => {
      if (res.success) {
        nextTick(()=>{
          airList.value = res.result.airInfoList;
          if(airList.value.length<=4){
            stopScroll();
          }
          else{
            startScroll();
          }
        });        
      } else {
        console.log('接口错误用默认');
      }
    })
}

const scrollerHeight = computed(()=>{
     return 120;
});

const aireRoomContainerHeight = computed(()=>{
  return  Math.ceil(airList.value.length/4) * 120;
});


onMounted(() => {
});

watchEffect(() => {
  props && loadAirData();
});


const scrollArea = ref(null);
let timer;
let SCROLL_SPEED = 1; // 每次滚动的像素数，可以根据需要调整

const startScroll = () => {
  if (timer) {
    clearInterval(timer);
  }
  if (airList.value.length <= 4){
    return;
  }
  SCROLL_SPEED = 1;
  timer = setInterval(() => {
    if (airList.value.length <= 4){
      return;
    }
    // 获取滚动容器
    const container = scrollArea.value.$el.querySelector('.el-scrollbar__wrap');
    if (SCROLL_SPEED==Math.ceil(airList.value.length/4)) {
      // 滚动到顶部
      nextTick(()=>{
        container.scrollTop = 0;
      });
      SCROLL_SPEED = 1;
    }
    else{      
      nextTick(()=>{
        container.scrollTop = SCROLL_SPEED * 120;
      });
      SCROLL_SPEED = SCROLL_SPEED + 1;
    }   
   
  }, 2000); // 根据需要调整滚动间隔
};


const stopScroll = () => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
};

onUnmounted(() => {
  stopScroll();
});

</script>

<style scoped lang="less">
.snowflake {
  animation: rotate 200ms infinite linear;
  opacity: 0.8;
  z-index: 2;
}

.icon {
  width: 36px;
  height: 36px;
}

.part-air-header {
  display: flex;
  align-items: center;
  text-align: center;
  

  span {
    font-size: 20px;
    font-weight: 700;
    color: whitesmoke
  }
}

.part-air-cls {
  width: 25%;
  height: 100%;
  display: flex;
  padding: 10px 4px !important;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.part-status-cls {
  border-radius: 5px;  
  color: #ffffff;
  font-size: 12;
  height: 34px;
  padding: 6px 10px;
  margin: 6px 0px;  
}

.status-open {
  background-color: #67C23A;
}

.status-close {
  background-color: #E6A23C;
}

.air-room-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.air-font {
  font-size: 12px;
  color: whitesmoke;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
}

:deep(.el-scrollbar__wrap){
  overflow-x: auto !important;
  height: calc(100% + 20px); /**多出来的20px是横向滚动条默认的样式 **/
}

:deep(.el-scrollbar .el-scrollbar__wrap .el-scrollbar__view){
  white-space: nowrap !important;
  display: inline-block !important;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
</style>
